To **link a file in another folder**, use **relative paths** based on the folder structure.
---
### ✅ **1. If the File is Inside a Subfolder**
📂 **Folder Structure:**
```
/project-folder
├── index.html
├── pages/
│ ├── about.html
```
🔗 **Linking `about.html` from `index.html`**
```html
Go to About Page
```
📌 **`pages/about.html`** → Moves **inside** the `pages` folder.
---
### ✅ **2. If the File is in a Parent Folder**
📂 **Folder Structure:**
```
/project-folder
├── index.html
├── about.html
├── subfolder/
│ ├── contact.html
```
🔗 **Linking `about.html` from `subfolder/contact.html`**
```html
Go to About Page
```
📌 **`../`** → Moves **one level up**.
---
### ✅ **3. If the File is in a Different Folder at the Same Level**
📂 **Folder Structure:**
```
/project-folder
├── index.html
├── assets/
│ ├── image.jpg
├── documents/
│ ├── report.pdf
```
🔗 **Linking `report.pdf` from `index.html`**
```html
Download Report
```
📌 Moves **from `index.html` to `documents/report.pdf`**.
---
### ✅ **4. If the File is Two Levels Up**
📂 **Folder Structure:**
```
/project-folder
├── index.html
├── assets/
│ ├── images/
│ │ ├── logo.png
```
🔗 **Linking `logo.png` from a deeper folder**
```html
View Logo
```
📌 **`../../`** → Moves **two levels up**.
---
### ✅ **5. Using an Absolute Path**
If the file is **hosted online**, use:
```html
Download File
```
📌 This works anywhere but needs an **internet connection**.
---
### 🎯 **Quick Reference**
## 📌 Quick Reference for Linking Files in Another Folder
| Scenario | Path Example |
| ------------------ | ------------------------------ |
| Inside a subfolder | `folder/file.html` |
| Move up one level | `../file.html` |
| Move up two levels | `../../file.html` |
| Different folder | `folder1/folder2/file.html` |
| Hosted online | `https://example.com/file.pdf` |
🚀 **Which one do you need? Let me know! 😊**
If you need to **move out of one folder and then enter another folder**, use `../` to **go up one level**, then specify the target folder.
---
### ✅ **Example Scenario**
📂 **Folder Structure:**
```
/project-folder
├── index.html
├── folderA/
│ ├── pageA.html
├── folderB/
│ ├── pageB.html
```
🔗 **Linking `pageB.html` from `folderA/pageA.html`**
```html
Go to Page B
```
📌 **Explanation:**
- `../` → Moves **out of `folderA`**.
- `folderB/pageB.html` → Enters `folderB` and opens `pageB.html`.
---
### ✅ **Another Example (Two Levels Up)**
📂 **Folder Structure:**
```
/project-folder
├── index.html
├── main/
│ ├── subA/
│ │ ├── pageA.html
├── assets/
│ ├── image.jpg
```
🔗 **Linking `image.jpg` from `main/subA/pageA.html`**
```html
View Image
```
📌 **Explanation:**
- `../../` → Moves **two levels up** (`subA` → `main` → `project-folder`).
- `assets/image.jpg` → Enters `assets` folder and opens `image.jpg`.
---
### 📌 **Markdown Quick Reference**
## 📌 Moving Between Folders in HTML Links
| Scenario | Path Example |
|----------------------------------|------------------------------|
| Move out of folder & enter another | `../folderB/pageB.html` |
| Move up two levels & enter folder | `../../assets/image.jpg` |
| Move up one level & enter subfolder | `../subfolder/file.html` |
| Move up three levels & enter folder | `../../../folderC/file.html` |
🚀 **Let me know if you need more examples!** 😊